<script setup>
import Cell from '@/components/cell/index.vue'
import CellItem from '@/components/cell-item/index.vue'

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: Number,
    default: 0
  },
  options: {
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value'
    })
  }
})

const emit = defineEmits(['update:modelValue'])

const active = ref(props.modelValue)

watch(props, newProps => {
  if (newProps.modelValue !== active.value) {
    active.value = newProps.modelValue
  }
})

watch(active, newActive => emit('update:modelValue', newActive))

</script>

<template>
  <cell border value-dark-color text-align="left">
    <cell-item
      :value="item[props.options?.label]"
      :value-styles="{ fontWeight: index === active ? 600 : 400 }"
      :right-icon="index === active ? 'yes' : ''"
      v-for="(item, index) of props.list"
      :key="index"
      @click="active = index"
    />
  </cell>
</template>

<style scoped lang="scss">

</style>
